<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3实现网页平滑过渡效果</title>
    <meta http-equiv="x-ua-compatible" content="IE-edge,chrome=1">
    <meta name="viewport" content="width=device-width,intaial-scale=1">
    <link href="css/normalize.css" type="text/css" rel="stylesheet">
    <link href="css/style.css" type="text/css" rel="stylesheet">

</head>
<body>
<div class="container">
    <nav class="st_container">
        <!--nav start-->
        <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
        <a href="#st_panel1-1">首页</a>
        <input type="radio" name="radio-set" id="st-control-2"/>
        <a href="#st_panel1-2">技术文章</a>
        <input type="radio" name="radio-set" id="st-control-3"/>
        <a href="#st_panel1-3">项目经验</a>
        <input type="radio" name="radio-set" id="st-control-4"/>
        <a href="#st_panel1-4">自我介绍</a>
        <input type="radio" name="radio-set" id="st-control-5"/>
        <a href="#st_panel1-5">外包接单</a>
        <!--nav end-->
        <div class="st-croll">
            <section class="st-panel" id="st_panel-1">
                <div class="st-desc" data-icon="2">

                </div>
                    <H2>侯龙龙</H2>
                    <p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>

            </section>

            <section class="st-panel  st-color" id="st_panel1-2">
                <div class="st-desc" data-icon="Ø"></div>
                    <H2>技术文章</H2>
                    <p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>

            </section>


            <section class="st-panel  st-color" id="st_panel1-3">
                <div class="st-desc" data-icon="b"> </div>
                    <H2>项目经验</H2>
                    <p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>

            </section>

            <section class="st-panel  st-color" id="st_panel1-4">
                <div class="st-desc" data-icon="x">  </div>
                    <H2>自我介绍</H2>
                    <p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>

            </section>

            <section class="st-panel  st-color" id="st_panel1-5">
                <div class="st-desc" data-icon="x"> </div>
                    <H2>外包接单</H2>
                    <p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>

            </section>
        </div>
    </nav>
</div>
</body>
</html>